/*
 * Copyright (C) 2015 - present Instructure, Inc.
 *
 * This file is part of Canvas.
 *
 * Canvas is free software: you can redistribute it and/or modify it under
 * the terms of the GNU Affero General Public License as published by the Free
 * Software Foundation, version 3 of the License.
 *
 * Canvas is distributed in the hope that it will be useful, but WITHOUT ANY
 * WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR
 * A PARTICULAR PURPOSE. See the GNU Affero General Public License for more
 * details.
 *
 * You should have received a copy of the GNU Affero General Public License along
 * with this program. If not, see <http://www.gnu.org/licenses/>.
 */

// Shared between:
// - bundles/login.scss
// - bundles/otp_login.scss

////////////////////////////////////////
/// Theme Editor Variables & Customization
//
/// These are the variables we will be overriding in the
/// Theme Editor. Note the ic-brand- prefix to denote
/// which are customizable.
////////////////////////////////////////
// ic-brand-Login-body-bgd-color
// ic-brand-Login-logo
// ic-brand-Login-body-bgd-shadow-color
// ic-brand-Login-body-bgd-image
// ic-brand-Login-Content-bgd-color
// ic-brand-Login-Content-border-color
// ic-brand-Login-Content-inner-bgd
// ic-brand-Login-Content-inner-border
// ic-brand-Login-Content-inner-body-bgd
// ic-brand-Login-Content-inner-body-border
// ic-brand-Login-Content-label-text-color
// ic-brand-Login-Content-password-text-color
// ic-brand-Login-footer-link-color
// ic-brand-Login-footer-link-color-hover
// ic-brand-Login-instructure-logo

$ic-Login-border-radius: 5px;
$modal_box_width: 623px;
$modal_box_padding: 20px;
$ic-Login-confirmation-bgd: #34444f;

////////////////////////////////////////
// New Login Styles
////////////////////////////////////////
.ic-Layout-contentMain {
  padding: 0;
}

body.ic-Login-Body { // apply the background to the body element so that you don't see white bg as you scroll
  background-color: $ic-brand-Login-body-bgd-color;
  background-image:
    linear-gradient(transparent, transparent 80%, $ic-brand-Login-body-bgd-shadow-color),
    $ic-brand-Login-body-bgd-image; // if there is a custom image
  background-size: cover;
  background-attachment: fixed;
  height: 100vh; // enable full height
}
.ic-Login {
  display: flex;
  justify-content: center;
  color: $ic-color-light;
}
.ic-Login__container {
  margin-top: $ic-sp*2;
}
.ic-Login__content {
  width: 400px;
  margin: 0 auto;
  background: $ic-brand-Login-Content-bgd-color;
  border: 5px solid $ic-brand-Login-Content-border-color;
  padding: $ic-sp;
  border-radius: $ic-Login-border-radius;
}
.ic-Login__innerContent {
  padding-top: $ic-sp*2;
  background: $ic-brand-Login-Content-inner-bgd;
  border: 2px solid $ic-brand-Login-Content-inner-border;
  border-radius: $ic-Login-border-radius;
}
.ic-Login__title {
  color: $ic-brand-Login-Content-label-text-color;
}
.ic-Login__text {
  color: $ic-brand-Login-Content-label-text-color;
}
//////////
// Login Body
//////////
.ic-Login__body {
  background: $ic-brand-Login-Content-inner-body-bgd;
  border: 2px solid $ic-brand-Login-Content-inner-body-border;
  padding: $ic-sp*1.5 $ic-sp*1.5 $ic-sp $ic-sp*1.5;
  margin-top: $ic-sp;
}
// these have !important because Canvas specificity on labels and
// links will override these if we don't
.ic-Form-control--login .ic-Label {
  color: $ic-brand-Login-Content-label-text-color !important;
}
.ic-Login__link {
  color: $ic-brand-Login-Content-password-text-color !important;
  text-decoration: underline;
}
.ic-Login__body__error {
  display: block;
  position:relative;
  top: auto;
  left: auto;
  max-width: 400px;
}

//////////
// Login Header
//////////
.ic-Login-header {
  padding: 0 $ic-sp*1.5;
  display: flex;
  justify-content: center;
  align-items: center;
}

.ic-Login-header__logo {
  flex: 0 0 160px;
  // Fix Firefox bug where flexed container doesn't
  // constrain its contents
  min-width: 1px;
}

.ic-Login-header__links {
  flex: 1;
  text-align: right;
  @include fontSize(13px);
  line-height: 1.3;
  box-sizing: border-box;
  padding-left: $ic-sp;

  .ic-Login__link {
    display: block;
    margin-top: $ic-sp/2;

    &:first-of-type {
      margin-top: 0;
    }
  }
}

.ic-Login__actions {
  display: flex;
  align-items: center;
  .ic-Login__actions-timeout {
    flex: 1;
    label {
      color: $ic-brand-Login-Content-label-text-color;
    }
  }
  .ic-Login__actions--right {
    flex: 1;
    display: flex;
    justify-content: flex-end;
  }
  .ic-Login__actions--left {
    flex: 1;
    text-align: left;
  }
  .ic-Form-control {
    margin-bottom: 0; // override to help vertical alignment
  }
  // simulating a ghost button to work for default high contrast login screen
  .Button--login {
    padding: $ic-sp/2 $ic-sp*3;
    background: transparent;
    color: $ic-brand-Login-Content-password-text-color;
    border: 1px solid $ic-brand-Login-Content-password-text-color;
    overflow: visible;

    &::before {
      content: "";
      position: absolute;
      top: -0.375rem;
      left: -0.375rem;
      right: -0.375rem;
      bottom: -0.375rem;
      border: 1px solid $ic-brand-Login-Content-password-text-color;
      border-radius: 0.375rem;
      opacity: 0;
    }

    &:focus {
      box-shadow: none;
      &::before {
        opacity: 1;
      }
    }

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border-radius: 0.175rem;
    }

    &:hover::after {
      background: $ic-brand-Login-Content-password-text-color;
      opacity: 0.1;
    }
  }
}
//////////
// Forgot Password
//////////
.ic-Login__forgot-text {
  color: $ic-brand-Login-Content-password-text-color;
  @include fontSize($ic-font-size--small);
  padding: 0 0 $ic-sp*2 0;
  margin: 0;
  line-height: $ic-sp*2;
}
//////////
// Enrollment Links
//////////
.ic-Login_enroll {
  text-align: center;
  padding: $ic-sp 0;
}
//////////
// Login Footer
//////////
// this hides the default application footer on
// the login screen so we can have a different
// placement for it
body.ic-Login-Body #footer.ic-app-footer {
  display: none !important;
}
body.ic-Login-Body #footer.ic-Login-footer {
  display: block !important;
}

// end
.ic-Login-footer {
  .terms-of-service__link {
    button {
      color: $ic-brand-Login-footer-link-color !important;
    }
  }
  .ic-Login-footer__logo-link {
    display: block;
    text-align: center;
    .ic-Instructure-Logo {
      fill: $ic-brand-Login-instructure-logo;
    }
  }
  // hide icon that gets added thru jquery
  span.ui-icon.ui-icon-extlink.ui-icon-inline {display: none;}
  .ic-Login-footer__links {
    padding: $ic-sp;
    text-align: center;
    a, .menu-item__text {
      color: $ic-brand-Login-footer-link-color;
      @include fontSize(11px);
      padding: 0 $ic-sp/2;
      white-space: nowrap;
      text-decoration: underline;
      &:hover {
        background-color: none;
        color: $ic-brand-Login-footer-link-color-hover;
      }
    }
  }
}
//////////
// Register Banner
//////////
.ic-Login__register-banner {

  .ic-Login__banner-title {
    font-weight: normal;
  }
  .ic-Login__banner-subtitle {
    font-weight: bold;
  }
}
//////////
// Unauthorized
//////////
#unauthorized_holder {
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 1);
  margin: 30px auto 20px;
  width: $modal_box_width + 2 * $modal_box_padding;
  #modal-box.login-box {
    margin: 0;
    box-shadow: none;
  }
  #unauthorized_message {
    margin: 0;
    width: auto;
    padding: 15px $modal_box_padding;
    line-height: 1.2;
    &.ui-state-error:before {
      top: 15px;
    }
    h2, .h2 {
      height: 41px;
      margin: 0 0 -5px 0;
      padding: 0 0 0 60px;
      color: #000;
    }
    p {
      padding: 0 0 0 60px;
      margin: 0;
      font-size: 1.25em;
      font-weight: normal;
    }
  }
}

.ic-Login-confirmation__headline {
  margin: 0 0 $ic-sp;
}

.ic-Login-confirmation__actions {
  margin-top: $ic-sp*2;
  text-align: right;
}

////
// Styles specific to the confirmation box, using new UI variables
////
body.body--login-confirmation {
  background: darken($ic-Login-confirmation-bgd, 3%);
}

.ic-Login-confirmation {
  box-sizing: border-box;
  border-radius: $baseBorderRadius;
  box-shadow: 0 1px 4px 1px rgba(black, 0.4);
  width: 400px;
  margin: $ic-sp*3 auto 0;
  width: 696px;
  form { margin-bottom: 0; } //override default margin on forms
}

.ic-Login-confirmation__header {
  background: $ic-Login-confirmation-bgd;
  border-top-left-radius: $baseBorderRadius;
  border-top-right-radius: $baseBorderRadius;
  padding: $ic-sp*1.5;
}

.ic-Login-confirmation__logo {
  width: 140px; height: 57px;
}

.ic-Login-confirmation__content {
  padding: $ic-sp*2;
  background: $ic-color-light;
  border-bottom-left-radius: $baseBorderRadius;
  border-bottom-right-radius: $baseBorderRadius;
}

.ic-Login-confirmation__auth-icon {
  display: inline-block;
  max-width: 72px;
  height: auto;
  vertical-align: middle;
  margin-right: $ic-sp;
}
